<!DOCTYPE html>

<html class="no-js" lang="en" xmlns="http://www.w3.org/1999/xhtml" xmlns:th="http://www.thymeleaf.org"> 

<head th:replace="common/sections :: header-css"/>

<body>


	<!-- Left Panel -->
	<aside th:replace="common/menus :: left-panel"></aside>

    <!-- Right Panel -->
	<div id="right-panel" class="right-panel">
	
		<header th:replace="common/menus :: rp-header"/>
		
		<div th:replace="common/menus :: rp-breadcrumbs (pageTitle='Create Checking')"/>
    
    	<!-- Page Content Begin -->
    
	    	<div class="content mt-3">
	            <div class="animated fadeIn">
	                
	                <div class="row">				
		    			<div class="col-lg-12">
	                    	<div class="card">
                      			<div class="card-header bg-flat-color-1">
                        			<strong class="card-title text-white">New Checking Account</strong>
                      			</div>
	                      		<form th:action="@{/account/checking-add}" method="post">
		                     		<div class="card-body card-block">
	                   					<div class="form-group text-left">
	                   						<div id="new-account-error-alert" class="sufee-alert alert with-close alert-danger alert-dismissible fade show" th:if="${errorMsg}">
						                       <span class="badge badge-pill badge-danger">Error</span>
						                       <span id="new-account-error-msg" th:text="${errorMsg}"></span>
						                       <button type="button" class="close" data-dismiss="alert" aria-label="Close">
						                           <span aria-hidden="true">&times;</span>
						                       </button>
						                   </div>
	                   					</div>
	                   					<div>
	                   						<div>
	                        					<label class="form-control-label"><strong>Select Checking Account Type</strong></label>
	                       					</div>
		                   					<div class="form-check-inline form-check">
		                            			<label class="form-check-label" th:each="acctType : ${accountTypeList}" th:for="${acctType.name}">
								                    <input type="radio" class="form-check-input" th:id="${acctType.name}" th:onclick="|document.getElementById('minDeposit').innerHTML='ex. Minimum opening deposit is $${acctType.minDeposit}';|" th:field="*{account.accountType}" th:text="${acctType.name} + '&nbsp;&nbsp;&nbsp;'" th:value="${acctType.id}" required/>
								                </label>
		                        			</div>
		                        			<br><br>
		                        		</div>
		                        		<div>
	                   						<div>
	                        					<label class="form-control-label"><strong>Select Account Ownership</strong></label>
	                       					</div>
		                   					<div class="form-check-inline form-check">
		                            			<label class="form-check-label" th:each="ownType : ${ownershipTypeList}" th:for="${ownType.name}">
								                    <input type="radio" class="form-check-input" th:id="${ownType.name}" th:field="*{account.ownershipType}" th:text="${ownType.name} + '&nbsp;&nbsp;&nbsp;'" th:value="${ownType.id}" required/>
								                </label>
		                        			</div>
		                        		<br><br>
		                        		</div>
		                        		<div class="row form-group">
		                        			<div class="col col-sm-4">
					                            <label class="form-control-label"><strong>Account Name</strong></label>
					                            <input type="text" class="form-control" id="name" th:field="${account.name}" required maxlength="40">
					                        	<small class="form-text text-muted">ex. Short descriptive name to easily identify account</small>
					                        </div>
		                        		</div>
		                        		<div class="row form-group">
		                        			<div class="col col-sm-4">
					                            <label class="form-control-label"><strong>Initial Deposit Amount</strong></label>
					                            <input type="text" class="form-control" id="openingBalance" th:field="${account.openingBalance}" required th:pattern="${patternTransactionAmount}">
					                        	<small class="form-text text-muted" id="minDeposit">ex. Minimum opening deposit is $25.00</small>
					                        </div>
		                        		</div>		
                      				</div> <!-- End Card Body -->
		                   			<div class="card-footer">
		                     			<button id="newCheckingSubmit" type="submit" class="btn btn-primary btn-sm"><i class="fa fa-dot-circle-o"></i> Submit</button>
		                     			<button id="newCheckingReset" type="reset" class="btn btn-danger btn-sm"><i class="fa fa-ban"></i> Reset</button>
		                  			</div> <!-- End Card Footer -->	
                     			</form>
                    		</div> <!-- End Card -->
                 		</div> <!-- End Column-->
                	</div> <!-- End Row -->
                	
	            </div><!-- .animated -->
	        </div><!-- .content -->
	        
	    <!-- Page Content End -->
	    
	</div> <!-- End right panel -->
    
	<!-- Footer -->
	<div th:replace="common/sections :: footer-scripts"></div>

</body>
</html>
